<template>
  <div>
    <el-card>
      <p>您的权限：["{{$store.state.power === 0 ? 'Admin' : 'Ordinary user'}}"]</p>
      <p class="trigger-power">切换权限：
        <el-radio-group v-model="power" @change="changePower()" :border="true" size="mini">
          <el-radio-button label="Editor"></el-radio-button>
          <el-radio-button label="Admin"></el-radio-button>
        </el-radio-group>
      </p>
      <div class="hint-tag">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-alert type="success" class="strong" :closable="false">Only <el-tag size="mini">{{power}}</el-tag> can see this</el-alert>
          </el-col>
          <el-col :span="5">
            <el-alert type="info" size="mini" :closable="false">v-permission="['{{power}}']"</el-alert>
          </el-col>
        </el-row>
        <el-row  :gutter="20">
          <el-col :span="8">
            <el-alert type="success" class="strong" :closable="false">Both <el-tag  size="mini">admin</el-tag> and <el-tag  size="mini">editor</el-tag> can see this</el-alert>
          </el-col>
          <el-col :span="6">
            <el-alert type="info" size="mini" :closable="false">v-permission="['admin','editor']"</el-alert>
          </el-col>
        </el-row>
        <div class="hint">
         <p>在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。
          e.g.</p>
        </div>
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane :label="power" name="first">
              <el-row class="tabs-row" :gutter="20">
                <el-col :span="6">
                  {{power}} can see this
                </el-col>
                <el-col :span="14">
                  <el-alert type="info" size="mini" :closable="false">v-permission="['{{power}}']"</el-alert>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="Admin-OR-Editor" name="second">
              <el-row class="tabs-row"  :gutter="20">
                <el-col :span="10">
                  Both admin or editor can see this
                </el-col>
                <el-col :span="14">
                  <el-alert type="info" size="mini" :closable="false">v-permission="['admin','editor']"</el-alert>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      power: this.$store.state.power ? 'Editor' : 'Admin',
      activeName: 'first'
    }
  },
  methods: {
    changePower(isJump) {
      const power = this.$store.state.power
      if(power === 0) {
        this.$store.commit('changePower', 1)
      }else {
        this.$store.commit('changePower', 0)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .el-card {
    margin: 10px;
    height: 500px;
  }
  .trigger-power {
    margin: 10px 0;
  }
  .hint-tag {
    margin: 20px 0;
  }
  .el-row {
    margin: 30px 0;
    display: flex;
    align-items: center;
  }
  .strong {
    font-weight: 600;
  }
  .hint {
    padding: 15px;
    margin: 20px 0;
    width: 100%;
    background-color: #ccc;
  }
  .el-tabs {
    width: 50%;
  }
  .tabs-row {
    margin: 0;
   font-size: 14px;
  }
  .el-alert {
    word-wrap: break-word;
  }
</style>
